<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>img scroll</title>
	<style type="text/css">
		* { margin:0; padding:0; }
		body { font:12px Arial; padding:50px;  }
		ol,ul { list-style:none; }
		img { border:0; }
		.box { width:100px; height:100px; background:#000; border:5px solid red; }

		.imgscroll { position:relative; margin-bottom:20px; width:500px; height:200px; overflow:hidden; }
		.imgscroll li { float:left; }
		.btns { position:absolute; top:100px; right:0; }
		.btns a:hover { background:#fff; border:1px solid #fc0; }
		.btns .navCurr { background:#fff; border:1px solid #fc0; }
		.btns a { float:left; padding:0 5px; border:1px solid #000;
			background:#ccc; margin-right:5px; text-decoration:none; }

	</style>
</head>
<body>
	<div id="imgscroll" class="imgscroll">
		<ul>
			<li>
				<a href="#"><img src="img1.jpg" alt="" /></a>
			</li>
			<li>
				<a href="#"><img src="img2.jpg" alt="" /></a>
			</li>
			<li>
				<a href="#"><img src="img3.jpg" alt="" /></a>
			</li>
		</ul>
		<div class="btns">
			<a class="a" href="javascript:;">1</a>
			<a class="b" href="javascript:;">2</a>
			<a class="c" href="javascript:;">3</a>
		</div>
	</div>	
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var a = new imgScroll({
		}).init();

//]]>	
</script>
</body>
</html>
